class Key {
    left: SVGElement;
    up: SVGElement;
    right: SVGElement;
    down: SVGElement;
    start: SVGElement;
    constructor(callback: Function) {
        this.up = document.getElementsByTagName("svg")[0] as SVGElement;
        this.left = document.getElementsByTagName("svg")[1] as SVGElement;
        this.right = document.getElementsByTagName("svg")[2] as SVGElement;
        this.down = document.getElementsByTagName("svg")[3] as SVGElement;
        this.start = document.getElementsByTagName("svg")[4] as SVGElement;
        let event = new KeyboardEvent('keydown', {});

        function keydown(keyCode: number) {
            event = new KeyboardEvent('keydown', { keyCode: keyCode });
            this.keydownShow(event);
            callback(event)
        }
        this.up.onclick = () => {
            keydown.bind(this)(38);
        }
        this.left.onclick = () => {
            keydown.bind(this)(37);
        }
        this.right.onclick = () => {
            keydown.bind(this)(39);
        }
        this.down.onclick = () => {
            keydown.bind(this)(40);
        }
        this.start.onclick = () => {
            keydown.bind(this)(32);
        }

    }
    // 按键按下显示
    keydownShow(event: KeyboardEvent) {
        let element: SVGSVGElement;
        switch (event.keyCode) {
            case 32:
                element = document.getElementById('btn2').querySelectorAll('svg')[0];
                break;
            case 37:
                element = document.getElementById('btn1').querySelectorAll('svg')[1];
                break;
            case 38:
                element = document.getElementById('btn1').querySelectorAll('svg')[0];
                break;
            case 39:
                element = document.getElementById('btn1').querySelectorAll('svg')[2];
                break;
            case 40:
                element = document.getElementById('btn1').querySelectorAll('svg')[3];
                break;
        }
        if (element) {
            element.setAttribute('style', 'transition:0s;fill:red;');
            setTimeout(() => {
                element.setAttribute('style', 'transition:1s;fill:;');
            }, 300);
        }
    }
}
export default Key;